import G6 from '@antv/g6';
import React, { useState, useEffect } from 'react';
import {
  neo4j
} from '@/request/api';

const DeviceGraph = () => {
//   const [List, setList] = useState({
//     nodes:{
//       properties:null
//     }
// });
  const fetchCourses = () => {
    const info = {};
    neo4j(info)
      .then((res) => {
        // setCourses(res.data)
        console.log(res, "res")
        let list = []
      list = res.data.nodes.map(item=>{
          return {
            id:item.properties.id,
            ortAttr: 0,
            sortAttr2: 'a',
            size: 0,
            style: {},
            label: item.properties.name
          }
        })
        let edges = []
        edges = res.data.relationships.map(item=>{
          return {
              source: item.startNode,
              target: item.endNode,
              label: '1',
          }
        })
        // setList(res.data)
        const data = {
          // nodes:List.nodes.properties,
          nodes:list,
          edges:edges
          // edges: [
          //   {
          //     source: '0',
          //     target: '1',
      
          //     label: '1',
          //   },
          //   {
          //     source: '0',
          //     target: '2',
          //     label: '2',
          //   },
          //   {
          //     source: '0',
          //     target: '3',
      
          //     label: '3',
          //   },
          //   {
          //     source: '0',
          //     target: '4',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '5',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '7',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '8',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '9',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '10',
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '11',
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '13',
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '14',
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '15',
          //     label: 'Include',
          //   },
          //   {
          //     source: '0',
          //     target: '16',
          //     label: 'Include',
          //   },
          //   {
          //     source: '2',
          //     target: '3',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '4',
          //     target: '5',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '4',
          //     target: '6',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '5',
          //     target: '6',
      
          //     label: 'Include',
          //   },
          //   {
          //     source: '7',
          //     target: '13',
          //     label: 'Include',
          //   },
          //   {
          //     source: '8',
          //     target: '14',
          //     label: 'Include',
          //   },
          //   {
          //     source: '9',
          //     target: '10',
          //     label: 'Include',
          //   },
          //   {
          //     source: '10',
          //     target: '22',
          //     label: 'Include',
          //   },
          //   {
          //     source: '10',
          //     target: '14',
          //     label: 'Include',
          //   },
          //   {
          //     source: '10',
          //     target: '12',
          //     label: 'Include',
          //   },
          //   {
          //     source: '10',
          //     target: '24',
          //     label: 'Include',
          //   },
          //   {
          //     source: '10',
          //     target: '21',
          //     label: 'Include',
          //   },
          //   {
          //     source: '10',
          //     target: '20',
          //     label: 'Include',
          //   },
          //   {
          //     source: '11',
          //     target: '24',
          //     label: 'Include',
          //   },
          //   {
          //     source: '11',
          //     target: '22',
          //     label: 'Include',
          //   },
          //   {
          //     source: '11',
          //     target: '14',
          //     label: 'Include',
          //   },
          //   {
          //     source: '12',
          //     target: '13',
          //     label: 'Include',
          //   },
          //   {
          //     source: '16',
          //     target: '17',
          //     label: 'Include',
          //   },
          //   {
          //     source: '16',
          //     target: '18',
          //     label: 'Include',
          //   },
          //   {
          //     source: '16',
          //     target: '21',
          //     label: 'Include',
          //   },
          //   {
          //     source: '16',
          //     target: '22',
          //     label: 'Include',
          //   },
          //   {
          //     source: '17',
          //     target: '18',
          //     label: 'Include',
          //   },
          //   {
          //     source: '17',
          //     target: '20',
          //     label: 'Include',
          //   },
          //   {
          //     source: '18',
          //     target: '19',
          //     label: 'Include',
          //   },
          //   {
          //     source: '19',
          //     target: '20',
          //     label: 'Include',
          //   },
          //   {
          //     source: '19',
          //     target: '33',
          //     label: 'Include',
          //   },
          //   {
          //     source: '19',
          //     target: '22',
          //     label: 'Include',
          //   },
          //   {
          //     source: '19',
          //     target: '23',
          //     label: 'Include',
          //   },
          //   {
          //     source: '20',
          //     target: '21',
          //     label: 'Include',
          //   },
          //   {
          //     source: '21',
          //     target: '22',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '24',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '25',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '26',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '23',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '28',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '30',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '31',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '32',
          //     label: 'Include',
          //   },
          //   {
          //     source: '22',
          //     target: '33',
          //     label: 'Include',
          //   },
          //   {
          //     source: '23',
          //     target: '28',
          //     label: 'Include',
          //   },
          //   {
          //     source: '23',
          //     target: '27',
          //     label: 'Include',
          //   },
          //   {
          //     source: '23',
          //     target: '29',
          //     label: 'Include',
          //   },
          //   {
          //     source: '23',
          //     target: '30',
          //     label: 'Include',
          //   },
          //   {
          //     source: '23',
          //     target: '31',
          //     label: 'Include',
          //   },
          //   {
          //     source: '23',
          //     target: '33',
          //     label: 'Include',
          //   },
          //   {
          //     source: '32',
          //     target: '33',
          //     label: 'Include',
          //   },
          // ],
        };
      
        const container = document.getElementById('container');
        const width = 2000;
        const height = 800;
        // useEffect(() => {
          
      
          const graph = new G6.Graph({
            container: 'container',
            width,
            height,
            modes: {
              default: ['drag-canvas', 'drag-node'],
            },
            layout: {
              type: 'radial',
              maxIteration: 1000,
              linkDistance: 300,
              preventOverlap: true,
              nodeSize: 60,
              sortBy: 'sortAttr2',
              sortStrength: 50,
            },
            animate: true,
            defaultEdge: {
              style: {
                endArrow: {
                  path: 'M 0,0 L 8,4 L 8,-4 Z',
                  fill: '#e2e2e2',
                },
              },
              labelCfg: {
                position: 'center', // 将 label 放在连接线的中间位置
                refX: 0, // 水平偏移
                refY: 0, // 垂直偏移
                autoRotate: true, // 让 label 自动旋转到与连接线平行的角度
                style: {
                  fill: 'black', // 文字颜色
                  fontSize: 8, // 文字大小
                  fontWeight: 'bold', // 字体粗细
                },
              },
            },
          });
      
          const colors = ['steelblue', 'green', 'pink', 'grey'];
          const colorsObj = { a: 'steelblue', b: 'green', c: 'pink', d: 'grey' };
          data.nodes.forEach((node) => {
            node.size = 30;
            node.style = {
              lineWidth: 4,
              fill: colors[node.sortAttr2] || colorsObj[node.sortAttr2],
              stroke: colors[node.sortAttr2] || colorsObj[node.sortAttr2],
            };
            node.label = node.id;
          });
          graph.data(data);
          graph.render();
      
          if (typeof window !== 'undefined')
            window.onresize = () => {
              if (!graph || graph.get('destroyed')) return;
              if (!container || !container.scrollWidth || !container.scrollHeight) return;
              graph.changeSize(container.scrollWidth, container.scrollHeight);
            };
        // }, [""])
      })
      .catch((e) => {
        console.log(e);
      });
  };
  fetchCourses()
  return (
    <div id='container'> </div>
  )
};
export default DeviceGraph